<template>
  <el-dropdown trigger="click" class="international" @command="handleSetTimeZon">
    <div>
      <el-button type="primary" size="mini" style="margin-top: 10px; margin-left: 10px;" >
        {{current_time_zon}}
      </el-button>
    </div>

    <el-dropdown-menu style="height: 300px;overflow-y: auto;" slot="dropdown">
      <el-dropdown-item v-for="(time_zone,key) in time_zone_list" :key="key"   @click.native="setTimeZon(key)" :id="time_zone">{{key}}</el-dropdown-item>
      <!-- <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
      <el-dropdown-item :disabled="language==='es'" command="es">Español</el-dropdown-item> -->
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { get_time_zone_list_and_current, set_time_zone } from "@/api/equipment/equipment";
export default {
  created() {
    get_time_zone_list_and_current(this.$store.getters.token).then((res) => {
      this.time_zone_list = res.data.list;
      this.current_time_zon=res.data.current;
    });
  },

  data() {
    return {
      time_zone_list: [],
      current_time_zon:''
    };
  },
  methods: {
    setTimeZon(time_zon) {
      set_time_zone(this.$store.getters.token,{'time_zone':time_zon}).then((res) => {
        if(res.status){
          this.time_zone_list = res.data.list;
          this.current_time_zon=res.data.current;
        }
      });
    },
    handleSetTimeZon(lang) {
      // this.$store.dispatch("setSettimeZon", lang);
      // this.$message({
      //   message: "Switch Language Success",
      //   type: "success",
      // });

    },
  },
};
</script>
